<template>
  <el-menu
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
    :default-active="currentIndex"
    class="el-menu-vertical-demo"
    background-color="rgb(48, 65, 86)"
    text-color="#fff"
    active-text-color="#ffd04b"
    router
  >
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-s-order"></i>
        <span>项目基础信息</span>
      </template>
      <el-menu-item-group>
        <el-menu-item class="nav-left" index="/project/Project">项目管理</el-menu-item>
        <el-menu-item index="/project/TunnelInfo">隧道管理</el-menu-item>
        <el-menu-item index="/design/addrPlane">设计图纸</el-menu-item>
        <el-menu-item index="/project/Progress">施工进度</el-menu-item>
      </el-menu-item-group>
    </el-submenu>

    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-eleme"></i>
        <span>隧道方案信息</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/design/build">施工方案</el-menu-item>
        <el-menu-item index="/design/monitoring">监测方案</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-help"></i>
        <span>工作监督管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/unit/ConstructionUnit">建设单位管理</el-menu-item>
        <!-- <el-menu-item index="/TestMenagentAdmin">检测母体管理</el-menu-item> -->
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="4">
      <template slot="title">
        <i class="el-icon-platform-eleme"></i>
        <span>施工监控量测</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/project/section">断面管理</el-menu-item>
        <el-menu-item index="/monitor/monitorInfo">拱顶下沉</el-menu-item>
        <el-menu-item index="/monitor/monitorfoot">拱脚下沉</el-menu-item>
        <el-menu-item index="/monitor/monitorperiphery">周边位移</el-menu-item>
        <el-menu-item index="/monitor/monitorsuface">地表下沉</el-menu-item>
        <el-menu-item index="/monitor/MonitorReport">报告管理</el-menu-item>
      </el-menu-item-group>
    </el-submenu>

    <el-submenu index="5">
      <template slot="title">
        <i class="el-icon-guide"></i>
        <span>超前地质预报</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/geology/predictionInfo">预报成果管理</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="6">
      <template slot="title">
        <i class="el-icon-bank-card"></i>
        <span>施工质量检测</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/construction/quailtyAdmin">初支检测报告</el-menu-item>
        <el-menu-item index="/construction/erchen">二衬检测报告</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="7">
      <template slot="title">
        <i class="el-icon-setting"></i>
        <span>系统信息管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/system/personAdmin">人员管理</el-menu-item>
        <el-menu-item index="/system/etype">开挖方式</el-menu-item>
        <el-menu-item index="/project/direction">方向管理</el-menu-item>
        <el-menu-item index="/project/tunnelwidth">洞幅管理</el-menu-item>
        <!-- <el-menu-item index="/system/syswarn">预警管理</el-menu-item> -->
        <el-menu-item index="/system/syswarnlog">预警日志</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
import api from "../../api";
import { mapState } from "vuex";
import jsCookie from "js-cookie";
export default {
  data() {
    return {
      username: "",
      currentIndex: "/BigData",
      isCollapse: false,
    };
  },
  components: {},
  //mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作
  mounted() {
    this.currentIndex = this.$route.path;
    this.$bus.$on("toggleClick", (sf) => {
      this.isCollapse = !this.isCollapse;
    });
    this.username = jsCookie.get("username");
  },
  methods: {
    logout() {
      api
        .logout()
        .then((res) => {
          if (res.data.code == 2001) {
            jsCookie.remove("username");
            jsCookie.remove("token");
            localStorage.removeItem("tunnel");
            this.$router.push("/");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style >
.el-aside {
  overflow-x: hidden!important;
  overflow-y: auto!important;
}
.el-aside::-webkit-scrollbar {
  width: 6px;
  /* background-color: red; */
}
.el-aside::-webkit-scrollbar-track {
  background-color: rgb(48, 65, 86);
}
.el-aside::-webkit-scrollbar-thumb {
  background-color: rgba(130, 152, 196, 0.3);
  border-radius: 4px;
}

.el-submenu__title {
  padding: 0 0 0 10px !important;
  text-align: left;
}

.lang {
  margin-right: 10px;
}
.header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #fff;
  /* box-shadow: 0px 0px 5px 1px #999; */
}

.header .user-name {
  margin-right: 10px;
  font-size: 15px;
  border: 1px solid #fff;
  display: inline-block;
  line-height: 40px;
  align-items: center;
}

.header .login {
  height: 50px;
  float: right;
  margin-right: 20px;
}

.header .login .item {
  height: 25px;
  margin-right: 30px;
}

.header .login .item i {
  display: block;
  font-size: 25px;
}

.el-menu-vertical-demo {
  height: 100%;
  /* position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  text-align: left;
  z-index: 1000; */
}

.el-menu-item,
.el-menu-item-group {
  background-color: #1f2d3d !important;
}
.el-menu-item {
  color: rgb(191, 203, 217);
}

.el-submenu span {
  color: rgb(191, 203, 217);
  margin-left: 7px;
}
.el-submenu .el-menu-item {
  height: 50px;
  line-height: 50px;
  padding: 0 45px;
  min-width: 199px;
}
.login {
  position: absolute;
  right: 10px;
  top: 0px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.user-dropdown {
  float: right;
}
.user-avatar {
  float: right;
  width: 40px;
  height: 40px;
  margin-top: 5px;
  margin-right: 10px;
  border-radius: 10px;
}
.el-breadcrumb {
  position: absolute;
  left: 250px;
  top: 20px;
}
</style>